<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
        <title>Streetview Mapsicle</title>
        <script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQGj0PqsCtxKvarsoS-iqLdqZSKfxRdmoPmGl7Y9335WLC36wIGYa6o5Q&amp;sensor=false">
        <script type="text/javascript">
            google.load("maps","2");
        </script>
        <script type="text/javascript">
          //<![CDATA[
          document.write('<script type="text/javascript" src="../src/mapsicle' + (document.location.search.indexOf('packed') > -1 ? '_packed' : '') + '.js"><' + '/script>');
          //]]>
        </script>     
        <script type="text/javascript">
          //<![CDATA[
            function init(){

                var home_point = new GLatLng(-41.279314, 174.777296);

              var mapsicle = new Mapsicle(document.getElementById("mapsicle_panel"), home_point);

                var map = new GMap2(document.getElementById("map_panel"));

                map.setUIToDefault();
                map.setCenter(home_point,17);

                var sv_map_icon = new GIcon();
                sv_map_icon.image = "http://maps.gstatic.com/mapfiles/cb/man_arrow-0.png";
                sv_map_icon.iconSize = new GSize(49,52);
                sv_map_icon.iconAnchor = new GPoint(26,32);
                var sv_map_location = new GMarker(home_point,{icon:sv_map_icon});
                map.addOverlay(sv_map_location);

                GEvent.addListener(mapsicle, "yawchanged", function(yaw){
                    var angle = parseInt((yaw/22.5)+0.5);
                    if (angle == 16) angle = 0;
                    sv_map_location.setImage("http://maps.gstatic.com/mapfiles/cb/man_arrow-" + angle + ".png");
                });
                GEvent.addListener(mapsicle, "mapsicle_position_changed", function(location){
                    sv_map_location.setLatLng(location.latlng);
                });
		var marker_point = new GLatLng(-41.27810318260378,174.77673053741455);
                var sv_marker =  new SVMarker({
                    iconURL:"images/mapsicle_marker.png",
                    width:150,
                    height:150
                });
                var location = new SVLocation({
		    name:"STREETVIEW MAPSICLE",
                    lat:marker_point.lat(),
                    lng:marker_point.lng(),
                    marker:sv_marker
                });
                mapsicle.addLocation(location);
                var map_icon = new GIcon();
                map_icon.image = "images/mapsicle_marker_sm.png";
                map_icon.iconSize = new GSize(35,35);
                map_icon.iconAnchor = new GPoint(17.5,17.5);
                var map_marker = new GMarker(marker_point,{icon:map_icon});
                map.addOverlay(map_marker);

            }
          //]]>
        </script>
    </head>
    <body onload="init();" onunload="GUnload()">
      <p><a href="?packed">Packed</a>&nbsp;|&nbsp;<a href="?">Unpacked</a> version of the script.</p>
      <div id="mapsicle_panel" style="width:850px;height:400px;"></div>
      <div id="map_panel" style="width:850px;height:200px;"></div>
    </body>
</html>


